<template>
  <div class="about">
    <!-- 标题 -->
    <h3>数据表格</h3>
    <!-- 数据表格 -->
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
    >
      <el-table-column label="Date" prop="date"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input :data="scope" v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加数据 -->
    <el-button type="primary" style="margin-top:10px;" @click="addTableData">添加数据</el-button>
    <!-- 弹出框 -->
    <el-dialog
      :title="currentTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="demo-input-suffix">
        <el-date-picker
          v-model="timeData"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-input placeholder="请输入姓名" prefix-icon="el-icon-search" v-model="nameData"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureTableData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      nameData: "",
      timeData: "",
      currentTitle: "添加数据",
      isAdd: true,
      currenEditData: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      search: ""
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index);
      this.isAdd = false;
      this.currentTitle = "编辑数据";
      this.timeData = row.date;
      this.nameData = row.name;
      this.currenEditData = { index, row };
      this.dialogVisible = true;
    },
    handleDelete(index) {
      this.$confirm("确认要删除这天数据么？")
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .catch(() => {});
    },
    handleClose(done) {
      this.$confirm("确认要关闭么？")
        .then(() => {
          this.timeData = "";
          this.nameData = "";
          done();
        })
        .catch(() => {});
    },
    addTableData() {
      this.isAdd = true;
      this.currentTitle = "添加数据";
      this.dialogVisible = true;
    },
    //提交数据
    sureTableData() {
      if (this.isAdd) {
        this.addData();
      } else {
        this.editData();
      }
    },
    //添加数据
    addData() {
      if (this.timeData.trim() == "") {
        this.msgTiShi("日期不能为空");
      } else if (this.nameData.trim() == "") {
        this.msgTiShi("姓名不能为空");
      } else {
        //这里打算使用定位方式
        this.tableData.push({
          date: this.timeData,
          name: this.nameData,
          address: "北京市"
        });
        this.clearInputData();
      }
    },
    //编辑数据
    editData() {
      if (this.timeData.trim() == "") {
        this.msgTiShi("日期不能为空");
      } else if (this.nameData.trim() == "") {
        this.msgTiShi("姓名不能为空");
      } else {
        //存在一些问题的· 当在查询里面修改会出现bug
        this.tableData.splice(this.currenEditData.index, 1, {
          date: this.timeData,
          name: this.nameData,
          address: this.currenEditData.row.address
        });
        this.clearInputData();
      }
    },
    //清除当前输入框内容 关闭dialog
    clearInputData() {
      this.timeData = "";
      this.nameData = "";
      this.dialogVisible = false;
    },
    msgTiShi(message) {
      this.$message({
        message,
        type: "warning"
      });
    }
  }
};
</script>
<style scoped>
.about {
  width: 80%;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
}
.el-input {
  width: 80%;
  margin-bottom: 8px;
}
</style>